<script setup>
// 组件公共属性
import { setMoveableRef } from "@/hooks/userEditor"
const { moveableReff } = setMoveableRef()
const attrs = useAttrs()
const element = attrs.element
watch(
  () => attrs.element,
  () => {
    setTimeout(() => {
      moveableReff.updateSelectors()
      moveableReff.updateRect()
      moveableReff.updateTarget()
      moveableReff.draggable = !element.lock
      moveableReff.resizable = !element.perspective
      moveableReff.warpable = element.perspective
    }, 100)
  },
  { deep: true }
)
</script>
<template>
  <a-form layout="inline" size="mini" auto-label-width>
    <div class="flex-between global">
      <div class="ml14">
        <div class="px14">
          {{ attrs.title }}
          <span class="px12 desc">
            {{ attrs.version }}
          </span>
        </div>
        <div class="desc">{{ attrs.name }}</div>
      </div>
    </div>
    <a-form-item label="组件标题">
      <xiri-form v-model="element.title" tips="" />
    </a-form-item>
    <a-form-item label="宽度">
      <xiri-form v-model="element.width" option="number" tips="" />
    </a-form-item>
    <a-form-item label="高度">
      <xiri-form v-model="element.height" option="number" tips="" />
    </a-form-item>
    <a-form-item label="X坐标">
      <xiri-form v-model="element.left" option="number" tips="" />
    </a-form-item>
    <a-form-item label="Y坐标">
      <xiri-form v-model="element.top" option="number" tips="" />
    </a-form-item>
    <a-form-item label="旋转角度">
      <xiri-form v-model="element.rotate" option="number" />
    </a-form-item>
    <a-form-item label="三维变换">
      <xiri-form v-model="element.perspective" option="switch" />
    </a-form-item>
    <a-form-item label="背景纯色">
      <xiri-form v-model="element.backgroundColor" option="linearColor" :popupProps="{ placement: 'left' }" />
    </a-form-item>
    <a-form-item label="背景图片" help="背景比纯色优先级高">
      <xiri-form v-model="element.backgroundImage" option="img" />
      <template #label>
        <div>背景图片</div>
        <xiri-form v-model="element.backgroundImage" option="imageChoose" />
      </template>
    </a-form-item>
    <a-form-item v-if="element.backgroundImage" label="背景尺寸">
      <a-select v-model="element.backgroundSize">
        <a-option value="cover" label="覆盖">覆盖</a-option>
        <a-option value="contain" label="包含">包含</a-option>
        <a-option value="auto" label="自动">自动</a-option>
        <a-option value="100% 100%" label="100%">100%</a-option>
      </a-select>
    </a-form-item>
    <a-form-item label="class样式">
      <a-popover trigger="click" position="left" :content-class="`w-[600px]`">
        <a-button>点击编辑</a-button>
        <template #content>
          <ma-code-editor v-model="element.classStyle" language="css" />
        </template>
      </a-popover>
    </a-form-item>
    <a-form-item label="层级">
      <xiri-form v-model="element.zIndex" option="number" />
    </a-form-item>
    <a-form-item label="透明度">
      <xiri-form v-model="element.opacity" option="number" />
    </a-form-item>
    <a-space size="0px">
      <a-form-item label="隐藏">
        <xiri-form v-model="element.hidden" option="switch" />
      </a-form-item>
      <a-form-item label="锁定" label-width="80px">
        <xiri-form v-model="element.lock" option="switch" />
      </a-form-item>
    </a-space>
  </a-form>
</template>
<style scoped lang="less">
.global {
  width: 100%;
  border-bottom: 1px solid var(--td-border-level-1-color);
  padding: 5px 0;
  margin-bottom: 10px;

  .desc {
    font-size: 12px;
    color: #999;
  }
}
</style>
